import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import { TabBar } from 'antd-mobile';
import Checkout from './Checkout';
import CheckoutList from './CheckoutList';
import UserCenter from './UserCenter';

class App extends Component {
	constructor(props){
		super(props);
	}

	componentWillMount(){
		let { initInfo, info, checkoutList, initCheckoutList } = this.props;
		if (typeof(info.username) == 'undefined'){
			initInfo();
		}

		if (checkoutList.length == 0){
			initCheckoutList();
		}
	}

	componentDidMount(){
		//除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate
		//
	}

	componentDidUpdate(){
		//
	}

	render() {
		let { logout, info, checkout, checkoutList, getMoreCheckoutList, selectedTab, changeSelectedTab,} = this.props;
		return (
			<div>
				<TabBar
					unselectedTintColor="#949494"
					tintColor="#33A3F4"
					barTintColor="white"
				  >
					<TabBar.Item
					  icon={require('../images/icon_checkin1.png')}
					  selectedIcon={require('../images/icon_checkin2.png')}
					  title="签退"
					  key="签退"
					  selected={selectedTab === 'redTab'}
					  onPress={() => {changeSelectedTab('redTab');}}
					  data-seed="logId1"
					>
					  <Checkout checkout={checkout} />
					</TabBar.Item>
					
					<TabBar.Item
					  icon={require('../images/icon_exchange1.png')}
					  selectedIcon={require('../images/icon_exchange2.png')}
					  title="记录"
					  key="记录"
					  selected={selectedTab === 'greyTab'}
					  onPress={() => {changeSelectedTab('greyTab');}}
					>
					  <CheckoutList checkoutList={checkoutList} getMoreCheckoutList={getMoreCheckoutList} />
					</TabBar.Item>
					<TabBar.Item
					  title="我"
					  key="我"
					  icon={require('../images/icon_me1.png')}
					  selectedIcon={require('../images/icon_me2.png')}
					  selected={selectedTab === 'blueTab'}
					  onPress={() => {changeSelectedTab('blueTab');}}
					  data-seed="logId"
					>
					  <UserCenter logout={logout} info={info} />
					</TabBar.Item>
				  </TabBar>
			</div>
			);
	}
}

export default App;